<!DOCTYPE html>
<!--
  - This file is part of Avenge <https://adblockplus.org/>,
  - Copyright (C) 2006-present eyeo GmbH
  -
  - Avenge is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License version 3 as
  - published by the Free Software Foundation.
  -
  - Avenge is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
  -->

<html>
  <head>
    <title data-i18n="firstRun_title"></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link type="text/css" href="skin/web.css" rel="stylesheet"/>
    <link type="text/css" href="skin/first-run.css" rel="stylesheet"/>
    <script src="polyfill.js"></script>
    <script src="ext/common.js"></script>
    <script src="ext/content.js"></script>
    <script src="common.js"></script>
    <script src="i18n.js"></script>
    <script src="first-run.js"></script>
  </head>
  <body>
    <nav id="navbar">
      <div class="navbar-container">
        <a id="navbar-logo" data-doclink="adblock_plus">
          <img src="skin/icons/web/navbar-logo.svg" alt="">
          <span>Adblock <strong>Plus</strong></span>
        </a>
      </div>
    </nav>

    <main>
      <header id="installation-status">
        <img src="skin/icons/first-run/checkmark-header.svg" alt="">
        <h1 data-i18n="firstRun_title"></h1>
        <p data-i18n="firstRun_subtitle"></p>
      </header>

      <div id="content" class="container content">
        <div id="warnings" class="container two-thirds">
          <section data-warning="reinitialized">
            <p id="warning-reinitialized" data-i18n="firstRun_warning_reinitialized"></p>
          </section>

          <section data-warning="dataCorrupted">
            <p data-i18n="firstRun_warning_dataCorrupted_intro"></p>
            <ol>
              <li data-i18n="firstRun_warning_dataCorrupted_step1"></li>
              <li data-i18n="firstRun_warning_dataCorrupted_step2"></li>
              <li id="dataCorrupted-reinstall" data-i18n="firstRun_warning_dataCorrupted_step3"></li>
            </ol>
            <small id="dataCorrupted-support" data-i18n="firstRun_warning_dataCorrupted_note"></small>
          </section>
        </div>

        <section class="column one-third">
          <header class="section-header">
            <img src="skin/icons/first-run/checkmark.svg" alt="">
            <h2 data-i18n="firstRun_control_title"></h2>
          </header>
          <p id="control-description" class="column-description" data-i18n="firstRun_control_description"></p>
        </section>

        <section class="column one-third">
          <header class="section-header">
            <img src="skin/icons/first-run/rocket.svg" alt="">
            <h2 data-i18n="firstRun_browser_title"></h2>
          </header>
          <p class="column-description" data-i18n="firstRun_browser_description"></p>
          <div class="store-buttons">
            <a class="store-button applestore-button" data-doclink="adblock_browser_ios_store" target="_blank">
              <img src="skin/backgrounds/appstore.svg" data-i18n-alt="firstRun_browser_store_ios">
            </a>
            <a class="store-button googleplay-button" data-doclink="adblock_browser_android_store" target="_blank">
              <img src="skin/backgrounds/googleplay.svg" data-i18n-alt="firstRun_browser_store_android">
            </a>
          </div>
        </section>

        <section class="column one-third">
          <header class="section-header">
            <img src="skin/icons/first-run/lock.svg" alt="">
            <h2 data-i18n="firstRun_fair_title"></h2>
          </header>
          <p id="fair-description" class="column-description" data-i18n="firstRun_fair_description"></p>
        </section>
      </div>
    </main>

    <footer id="footer" class="content">
      <div class="container">
        <p id="copyright-notice"></p>
      </div>
    </footer>
  </body>
</html>
